<template>
  <view class="city-page">
    <view class="status-bar"></view>
    <first-nav></first-nav>
    <!-- 定位信息 -->
    <view class="dark">
      <view class="location-info" @click="switchCity">
        <view class="location-svg">
          <i class="iconfont icon-location location-icon"></i>
          <text class="location-text">{{ locationText }}</text>
        </view>
        <view
          class="location-switch tw-text-right tw-relative"
          @click="switchCity"
        >
          切换
          <span class="tw-ml-2 arrow"></span>
        </view>
      </view>

      <view class="video-container">
        <view
          class="video-item-box"
          v-for="(item, index) in videos"
          :key="index"
        >
          <video
            class="video-item"
            :src="this.baseURL + '/static/video/' + item.src"
            object-fit="contain"
            controls
          ></video>
          <view class="video-info">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
    <tab></tab>
  </view>
</template>

<script>
  import { videosData as defaultVideos } from "@/data-test/index-data";
  import firstNav from "../../components/index/video-header.vue";
  import tab from "../../components/tab.vue";
  import cityItem from "../../components/city/city-item.vue";
  import api from "@/API";
  import { citySelectorPage } from "@/API/pageConst";
  export default {
    components: {
      firstNav,
      tab,
      cityItem,
    },
    data() {
      return {
        locationText: "北京",
        videos: [],
      };
    },
    onLoad() {
      this.getLocation();
      this.loadData();
    },
    mounted() {},
    methods: {
      getLocation() {
        // uni.getLocation({
        //   type: "wgs84",
        //   success: (res) => {
        //     this.locationText = "北京";
        //   },
        //   fail: (err) => {
        //     console.error(err);
        //     this.locationText = "北京";
        //   },
        // });
      },
      loadData() {
        api.video
          .getVideoList()
          .then((res) => {
            this.videos = res.data;
          })
          .catch((err) => {
            if (!err.data && err.statusCode === 500) {
              this.videos = defaultVideos;
            }
          });
      },
      switchCity() {
        uni.navigateTo({
          url: citySelectorPage,
          success: (res) => {
            const eventChannel = res.eventChannel;
            eventChannel.emit("location-city-event", {
              city: this.locationText,
            });
          },
          events: {
            citySelected: (data) => {
              this.locationText = data.city;
            },
          },
        });
      },
    },
  };
</script>

<style>
  .location-icon {
    font-size: 16px;
    color: #fff;
  }
  .black-bg {
    background-color: #000;
    color: gray;
  }
  .white-bg {
    background-color: #fff;
    color: #000;
  }
  .city-page {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .location-icon {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
  }
  .location-info {
    padding: 5px;
    border-radius: 10px;
    margin: 10px;
    height: 20px;
    line-height: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: gray;
    background-color: #8d8d8d63;
    font-size: 14px;
  }
  .location-svg {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .location-text {
    padding-left: 5px;
    height: 20px;
    line-height: 20px;
  }

  .video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    gap: 10px;
    padding: 10px;
    padding-bottom: 20px;
    height: calc(100vh - 170px);
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
  }
  .video-container::-webkit-scrollbar {
    width: 5px;
  }
  .video-container::-webkit-scrollbar-track {
    background-color: #1e1e1e;
    border-radius: 10px;
  }

  .video-container::-webkit-scrollbar-thumb {
    background-color: #3d3d3d;
    border-radius: 10px;
  }

  .video-item-box {
    width: 100%;
  }
  .video-item {
    width: 100%;
    object-fit: cover;
  }

  .arrow::after {
    content: "";
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #808080;
    display: inline-block;
    vertical-align: middle;
  }
  .location-switch {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-info {
    height: 40px;
    line-height: 40px;
    color: #cac8c8;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
  }
</style>
